<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>归档</title>
    <link rel="icon" href="/images/logo.ico"/>
    <link rel="stylesheet" href="/lib/semantic/semantic.min.css">
    <link rel="stylesheet" href="/lib/animate/animate.min.css"/>
    <link rel="stylesheet" href="/css/me.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"  media="none" onload="this.media='all'">
</head>
<body class="m-back-img2">
<!--导航-->
<nav class="animated fadeInDown m-back-grass m-fixed-w">
    <div class="ui container">
        <div class="ui inverted secondary stackable  menu">  <!--stackable 可堆叠的 应用在移动端-->
            <h2 class="ui white header item"><a href="/">猫喵喵~Blog</a></h2>
            <a href="/" class="nav_item item m-mobile-hide"><i
                        class="home icon"></i>首页</a>
            <a href="/p/types.html" class="nav_item item m-mobile-hide"
            ><i class="idea icon"></i>分类</a>
            <a href="/p/tags.html" class="nav_item item m-mobile-hide">
                <i class="tags icon"></i>标签</a>
            <a href="/p/archives.html" class="nav_item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="/p/guestbook.html" class="nav_item item m-mobile-hide">
                <i class="comments outline icon"></i>留言板</a>
            <a href="/p/about.html" class="nav_item item m-mobile-hide"><i
                        class="info icon"></i>关于我</a>
            <div class=" m-mobile-hide m-search">
                <i class="search line icon funIcon"></i>
                <i class="close line icon funIcon no "></i>
                <form content="m-mobile-show" action="#" th:action="@{/search}" name="search">
                    <div class="m-form">
                        <input type="text" name="query" placeholder="快来找你要的东东ヾ(≧▽≦*)o" required="required">
                        <i onclick="document.forms['search'].submit()" class="search link icon s-icon"></i>
                    </div>
                </form>
            </div>
            <div class="nav_search right item no">
                <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui icon inverted transparent input m-margin-tb-tiny">
                        <input id="query" type="text" name="query" placeholder="Search....">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <span id="menu_toggle" class="ui black button m-mobile-show m-top-right ">
        <i class="sidebar icon"></i>
    </span>
</nav>

<!--top attached 完整拼接成一个相连区域 bottom attached-->
<!--中间内容-->
<div id="pointTop" style="min-height: 700px;" class="m-container-small m-padded-tb-4em m-padded-top-best">
    <div class="ui container">
        <!-- header-->
        <div class="ui top attached segment animated flipInX">
            <div class="ui middle aligned two column grid">
                <div class="column">

                    <h3 class="ui  header">归档</h3>
                </div>
                <div class="right aligned column ">
                    共<h2 id="blogCount" class="ui orange header m-inline-block m-text-thin">999</h2>篇博客
                </div>
            </div>
        </div>
        <div id="archiveMap" style="height:800px;overflow:auto;">
            <!-- js填充-->
        </div>
    </div>
</div>

<!--底部footer-->
<footer id="" class="ui inverted vertical segment m-padded-tb-massive m-padded-top">
    <!--    居中-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="/images/weixin.png" class="ui rounded image"
                             alt="" width="110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">推荐博客</h4>
                <div id="recommends" class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">Email：1447051936@qq.com</a>
                    <a href="#" class="item">QQ:1447051936</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity">
                    这厮我的个人博客，会分享关于编程，思考，随笔相关的内容，欢迎大家访问，希望可以给到这的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
    </div>

    <div class="ui center aligned container m-font-size">本站😉已运行✌[<span id="span_dt_dt"></span> ]
    </div>
    <!--    居中-->
    <div class="ui center aligned container m-padded-tb-small">
        <p class="m-text-thin m-text-spaced" style="color: whitesmoke">Copyright © 2021-2022 听宇轩 , All rights reserved.
        </p>
        <div>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41142102000072"
               style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
                        src="http://www.beian.gov.cn/img/ico.ico" style="float:left;">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#ff1c04;">豫ICP备
                    2021028184号</p></a>
        </div>
    </div>
    <div class="back-enter">
        <a href="/back/index.html" title="看看后门"><i class="sign in alternate icon"></i></a>
    </div>
    <meting-js
            server="netease"
            type="playlist"
            id="6859965088"
            mini="true"
            artist="rainymood"
            fixed="true">
    </meting-js>
</footer>
</body>
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/lib/semantic/semantic.min.js"></script>
<script src="/lib/layer/layer.js"></script>
<!--<script src="/js/snowFall.js"></script>-->
<script src="/js/showTime.js"></script>
<!--comment.js-->
<script type="text/javascript" src="/js/common.js"></script>
<!-- require APlayer -->
<script async="async" src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script async="async" src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<script type="text/javascript">
    $(function () {
        browser();
        init()
    });

    function init() {
        let url = "/archives";
        $.ajax({
            url: url,
            type: "GET",
            success: function (res) {
                layer.closeAll();
                if (res.code === 200) {
                    let data = res.data;
                    let context = "";
                    let total = 0;
                    $.each(data, function (key, item) {//每一行
                        context += '<div><h2 class="ui center aligned header animated fadeInUp">'
                            + key
                            + '</h2><div class="ui fluid vertical menu animated fadeInUpBig "> ';

                        $.each(item, function (index, val) {
                            let data = new Date(Date.parse(val.updateTime.replace(/-/g, "/"))).format('MM月dd');
                            total++;
                            context += '<a href="'
                                + '/p/blog.html?article='
                                + val.id
                                + '" class="item m-card-mod"><span><i class="mini teal circle icon"></i><span>'
                                + val.title
                                + '</span><div class="ui teal basic left pointing label m-padded-tb-mini">'
                                + data
                                + '</div></span><div class="ui orange basic label m-padded-tb-mini">'
                                + val.flag
                                + '</div></a>';
                        });
                        context += '</div></div>';
                        $("#archiveMap").html(context);
                    });

                    $("#blogCount").text(total);
                }
            },
            error: function (res) {
                layer.closeAll();
                layer.msg(res.code + "error，也许您的网络有问题");
            }
        });
    };

</script>

</html>